<template>
  <div class="container">
    <header>
      <img class="mask" :src="playListDetail.coverImgUrl" alt="">
      <div class="image-wrapper">
        <img :src="playListDetail.coverImgUrl" alt="">
        <div class="tag">歌单</div>
        <div class="play-count">
          <van-icon name="service-o" />
          {{ (playListDetail.playCount / 10000).toFixed(1) }}万
        </div>
      </div>
      <div class="info">
        <div class="title">{{ playListDetail.name }}</div>
        <div class="author-wrapper">
          <img class="avatar" :src="playListDetail.creator ? playListDetail.creator.avatarUrl : ''" >
          <span>{{ playListDetail.creator ? playListDetail.creator.nickname : '' }}</span>
        </div>
      </div>
    </header>
    <div class="sub-title">歌曲列表</div>
    <song-list :list="list" mode="normal" />
    <div class="sub-title">最新评论({{ commentList.length }})</div>
    <comment-list :list="commentList" />
    <div class="sub-title">热门评论({{ hotCommentList.length }})</div>
    <comment-list :list="hotCommentList" />
    <footer>
      <van-button
        class="like-btn"
        color="red"
        round
      >
        收藏歌单
      </van-button>
    </footer>
  </div>
</template>

<script>
import eventBus from '@/event-bus';

export default {
  computed: {
    playListDetail () {
      return eventBus.playListDetail;
    },
    playListCommentList () {
      return eventBus.playListCommentList;
    },
    // 最新评论
    commentList () {
      return eventBus.playListCommentList.comments?.map(item => ({
        id: item.commentId,
        avatar: item.user.avatarUrl,
        nickname: item.user.nickname,
        timestamp: item.time,
        timeStr: item.timeStr,
        content: item.content,
        starCount: item.likedCount,
        vipLevel: item.user.vipType,
        source: {
          nickname: item.beReplied[0]?.user.nickname,
          content: item.beReplied[0]?.content,
        },
      })) || [];
    },
    hotCommentList () {
      return eventBus.playListCommentList.hotComments?.map(item => ({
        id: item.commentId,
        avatar: item.user.avatarUrl,
        nickname: item.user.nickname,
        timestamp: item.time,
        timeStr: item.timeStr,
        content: item.content,
        starCount: item.likedCount,
        vipLevel: item.user.vipType,
        source: {
          nickname: item.beReplied[0]?.user.nickname,
          content: item.beReplied[0]?.content,
        },
      })) || [];
    },
    list () {
      return eventBus.playListDetail.tracks?.map((item) => ({
          id: item.id,
          name: item.name, // 歌曲名
          maxBr: 1, // 最大音质
          alias: item.alia[0], // 别名
          artists: item.ar, // 歌手数组
          albumName: item.al.name, // 专辑名
        })) || [];
    },
  },
  created () {
    eventBus.$emit('updatePlayListDetail', this.$route.params.id);
    eventBus.$emit('updatePlayListCommentList', this.$route.params.id);
  },
}
</script>

<style lang="less" scoped>
@import url('@/assets/base.less');

.container {
  margin-bottom: 80px;
}

header {
  display: flex;
  padding: 32px 16px;
  color: #fff;
  z-index: -999;
  position: relative;
  overflow: hidden;

  .mask {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    z-index: -999;
    .mao;
  }

  .image-wrapper {
    height: 126px;
    width: 126px;
    position: relative;
    margin-right: 16px;

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .tag {
      position: absolute;
      top: 8px;
      left: 0;
      width: 34px;
      height: 17px;
      border-top-right-radius: 9px;
      border-bottom-right-radius: 9px;
      background: rgba(150, 0, 0, .5);
      text-align: center;
      line-height: 17px;
      font-size: 12px;
      z-index: 999;
    }
    .play-count {
      text-shadow: 0px 0px 1px black;
      font-size: 12px;
      position: absolute;
      top: 2px;
      right: 2px;
      z-index: 999;
    }
  }

  .info {
    flex: 1;

    .title {
      .text-overflow;
      margin-bottom: 4px;
    }

    .author-wrapper {
      display: flex;
      align-items: center;

      .avatar {
        height: 30px;
        width: 30px;
        border-radius: 50%;
        display: block;
        margin-right: 4px;
      }
      span {
        color: rgba(255, 255, 255, .7);
      }
    }


  }
}

.sub-title {
  font-size: 12px;
  padding: 2px 8px;
  background-color: #f5f5f5;
  color: #333;
}

footer {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;

  .like-btn {
    padding: 0 48px;
  }
}
</style>